<script setup>

</script>

<template>
  <div class="img-container">
    <img src="../../assets/index.png" class="responsive-img">
  </div>
</template>

<style scoped>
.img-container {
  width: 80%;           /* 父容器占页面宽度的 80% */
  max-width: 1200px;    /* 最大宽度限制 */
  margin: 0 auto;       /* 居中显示 */
  overflow: hidden;     /* 可选：裁剪超出部分 */
  border: 1px solid #ccc;
  border-radius: 10px;  /* 圆角边框 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.responsive-img {
  width: 100%;          /* 图片撑满父容器宽度 */
  height: auto;         /* 自动调整高度保持比例 */
  object-fit: cover;    /* 图片按比例填充，不拉伸变形 */
}
</style>